import { Button, Input, message, Modal, Select } from 'antd';
import { connect } from 'dva';
import React from 'react';
import styles from './index.less';

const { Option } = Select;

@connect(state => ({}))
export default class EditModal extends React.PureComponent {
  state = {
    name: '',
    phone: '',
    description: '',
    submitBntLading: false,
  };

  componentDidMount() {
    const { editModalData } = this.props;
    this.setState({
      name: editModalData.name,
      phone: editModalData.phone,
      description: editModalData.description,
    });
  }

  handleSubmit = () => {
    const { changeEditModalVisible, editModalData } = this.props;
    const { name, phone, description } = this.state;
    let submitData = {};
    submitData.sid = editModalData.sid;
    if (!name.trim()) {
      message.error('姓名不能为空');
      return;
    } else {
      submitData.name = name;
    }
    if (!phone.trim()) {
      message.error('电话不能为空');
      return;
    } else {
      const regPhone = new RegExp(/^1[0-9]{10}$/);
      if (regPhone.test(phone)) {
        submitData.phone = phone;
      } else {
        message.error('电话格式不正确');
        return;
      }
    }
    submitData.description = description;
    this.setState({
      submitBntLading: true,
    });
    this.props.dispatch({
      type: 'http/postObjWithRes',
      payload: {
        url: '/deviceManagement/qualitypersonmanagement/edit',
        ...submitData,
      },
      callback: response => {
        if (response && response.statusCode == '0') {
          console.log('success', response);
          message.success('操作成功');
          changeEditModalVisible(true);
        } else {
          // message.error(response.statusMessage);
        }
        this.setState({
          submitBntLading: false,
        });
      },
    });
  };

  handleRadioClick = e => {
    this.setState({
      radioValue: e.target.value,
    });
  };

  render() {
    const { submitBntLading, name, phone, description } = this.state;

    const { changeEditModalVisible } = this.props;

    return (
      <Modal
        title="编辑质检人员"
        onCancel={() => changeEditModalVisible(false)}
        visible={true}
        footer={[
          <Button key="back" type="ghost" onClick={() => changeEditModalVisible(false)}>
            取 消
          </Button>,
          <Button
            key="submit"
            type="primary"
            loading={submitBntLading}
            onClick={() => this.handleSubmit('submit')}
          >
            提 交
          </Button>,
        ]}
      >
        <div className={styles.addModal}>
          <div className={styles.publicItem}>
            <div className={styles.itemLeft}>
              <span>*</span>姓名 :
            </div>
            <div className={styles.itemRight}>
              <Input
                maxLength={50}
                value={name}
                placeholder={'请输入姓名'}
                onChange={e => {
                  this.setState({
                    name: e.target.value || '',
                  });
                }}
              />
            </div>
          </div>
          <div className={styles.publicItem}>
            <div className={styles.itemLeft}>
              <span>*</span>电话 :
            </div>
            <div className={styles.itemRight}>
              <Input
                value={phone}
                placeholder={'请输入电话'}
                onChange={e => {
                  this.setState({
                    phone: e.target.value || '',
                  });
                }}
              />
            </div>
          </div>
          <div className={styles.publicItem}>
            <div className={styles.itemLeft}>描述 :</div>
            <div className={styles.itemRight}>
              <Input
                maxLength={200}
                value={description}
                placeholder={'请输入描述'}
                onChange={e => {
                  this.setState({
                    description: e.target.value || '',
                  });
                }}
              />
            </div>
          </div>
        </div>
      </Modal>
    );
  }
}
